//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

@mixin check-box() {
    /* ==========================================================================
       Check box

       Default Mendix check box widget
    ========================================================================== */

    .mx-checkbox.label-after {
        flex-wrap: wrap;

        .control-label {
            display: flex;
            align-items: center;
            padding: 0;
        }
    }

    input[type="checkbox"] {
        position: relative !important; //Remove after mxui merge
        width: 16px;
        height: 16px;
        margin: 0 !important; // Remove after mxui merge
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        transform: translateZ(0);

        &:before,
        &:after {
            position: absolute;
            display: block;
            transition: all 0.3s ease;
        }

        &:before {
            // Checkbox
            width: 100%;
            height: 100%;
            content: "";
            border: 1px solid $form-input-border-color;
            border-radius: $form-input-border-radius;
            background-color: transparent;
        }

        &:after {
            // Checkmark
            width: 8px;
            height: 4px;
            margin: 5px 4px;
            transform: rotate(-45deg);
            pointer-events: none;
            border: 2px solid #ffffff;
            border-top: 0;
            border-right: 0;
        }

        &:not(:disabled):not(:checked):hover:after {
            content: "";
            border-color: $form-input-bg-hover; // color of checkmark on hover
        }

        &:checked:before {
            border-color: $form-input-border-focus-color;
            background-color: $form-input-border-focus-color;
        }

        &:checked:after {
            content: "";
        }

        &:disabled:before {
            background-color: $form-input-bg-disabled;
        }

        &:checked:disabled:before {
            border-color: transparent;
            background-color: rgba($form-input-border-focus-color, 0.4);
        }

        &:disabled:after,
        &:checked:disabled:after {
            border-color: $form-input-bg-disabled;
        }

        & + .control-label {
            margin-left: $form-label-gutter;
        }
    }
}
